<script lang="ts" setup>
//文章内容
import { IndexShowData } from "@/api/interface";
import { computed } from "vue";
interface Props {
  data: IndexShowData;
}

const props = defineProps<Props>();
const active = computed(() => {
  //有值则展示
  if (typeof props.data?.content != "undefined") {
    return true;
  }
});
</script>

<template>
  <template v-if="active">
    <div class="entry-content">
      <div v-html="data.content"></div>
    </div>
  </template>
  <template v-else>
    <div style="margin: auto; width: 87.5%">
      <el-skeleton :rows="3" />
    </div>
  </template>
</template>

<style lang="less" scoped>
.entry-content {
  margin-left: auto;
  margin-right: auto;
  width: 653px;
  //段落
  :deep(p) {
    margin-bottom: 1.4211em;
    overflow-wrap: break-word; //换行
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
      "Arial", sans-serif;
    video {
      width: 100%;
      height: auto;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  :deep(p):first-child {
    margin-top: 0;
  }
  :deep(h2) {
    font-size: 24px;
    line-height: 1.16667;
    font-weight: 700;
    letter-spacing: 0.009em;
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
      "Arial", sans-serif;
    margin-bottom: 16px;
    margin-top: 52px;
  }
  :deep(figure) {
    margin-top: 44px;
    margin-bottom: 44px;
    img {
      width: 100%;
      height: auto;
    }
  }
  :deep(ul),
  :deep(ol) {
    margin-left: 1.17647em;

    li {
      margin-bottom: 12px;

      font-size: 14px;
      line-height: 1.42859;
      font-weight: 400;
      letter-spacing: -0.016em;
      font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
        "Arial", sans-serif;
    }
  }
}
@media only screen and (max-width: 1068px) {
  .entry-content {
    width: 576px;
  }
}
@media only screen and (max-width: 734px) {
  .entry-content {
    max-width: 414px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  :deep p,
  :deep h2,
  :deep figure,
  :deep ul,
  :deep ol,
  :deep hr,
  :deep pre {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
}
</style>
